<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>XML数据格式请求</title>
		<style>
		span {
			color: red;
		}
		</style>
	</head>
	<body>
		<h2>点击按钮请求XML数据</h2>
		<h3>person1.xml的文本信息如下：</h3>
		<b>标题：</b> <span id="sp1"></span><br>
		<b>姓名：</b> <span id="sp2"></span><br>
		<b>头衔：</b> <span id="sp3"></span><br>
		<b>成就：</b> <span id="sp4"></span><br>
		<b>简述：</b> <span id="sp5"></span><br>
		<button id="bt1" onclick="fun1()">读取XML文本内容</button>
		<hr />
		<h3>person2.xml的文本信息如下：</h3>
		<b>标题：</b> <span id="sp6"></span><br>
		<b>姓名：</b> <span id="sp7"></span><br>
		<b>头衔：</b> <span id="sp8"></span><br>
		<b>成就：</b> <span id="sp9"></span><br>
		<b>简述：</b> <span id="sp10"></span><br>
		<button id="bt2" onclick="fun2()">读取XML属性内容</button>
	</body>
	<script>
	function fun1(){
		xhr = new XMLHttpRequest();
		xhr.open("GET","file/person1.xml",false);
		xhr.send();
		var content=xhr.responseXML;
		var arrarys=document.getElementsByTagName("span");
		var aim=content.getElementsByTagName("people");
		var k=0;
		for(var i=1;i<aim[0].childNodes.length;){
			 arrarys[k++].innerHTML=aim[0].childNodes[i].innerHTML;
			 i=i+2;
		}
	}
	
	function fun2(){
		xhr = new XMLHttpRequest();
		xhr.open("GET","file/person2.xml",false);
		xhr.send();
		var content=xhr.responseXML;
		var arrarys=document.getElementsByTagName("span");
		var aim=content.getElementsByTagName("person");
		arrarys[5].innerHTML=aim[0].getAttribute("note");
		arrarys[6].innerHTML=aim[0].getAttribute("name");
		arrarys[7].innerHTML=aim[0].getAttribute("tag");
		arrarys[8].innerHTML=aim[0].getAttribute("achievment");
		arrarys[9].innerHTML=aim[0].getAttribute("describe");
	}
	</script>
</html>
